<template>
    <div class="data-auth">
        <div class="search-box">
            <div class="tips" style="display:inline-block;">
                针对审批、考勤、简报、销售等应用，设置该角色的查看、管理数据范围
            </div>
        </div>
        <div class="table-wrap">
            <el-table 
                v-loading="loading" 
                height="100%" 
                :data="tableData">
                <el-table-column label="应用" prop="objName" width="150" align="left" show-overflow-tooltip></el-table-column>
                <el-table-column label="查看数据范围" prop="dataPermName" min-width="150" align="left" show-overflow-tooltip></el-table-column>
                <el-table-column label="管理数据范围" prop="opeDataPermName" min-width="150" align="left" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button type="text" @click="authFun(scope.row)">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <set-auth ref="set" @refresh="getDataAuth"></set-auth>
    </div>
</template>

<script>
import setAuth from './setAuth';
import { getDataAuthlistById } from '../service.js';
import { mapState } from 'vuex';
export default {
    name: 'dataAuth', // 数据权限
    props: {
        treeNode: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    components: { setAuth },
    data() {
        return {
            tableData: [],
            loading: false,
        }
    },
    computed: {
        ...mapState({
            systemId: state => state.token.systemId
        })
    },
    watch: {
        treeNode: {
            handler: function(node) {
                if(node.nodeType == 'cate') {
                    this.tableData = [];
                }else {
                    this.getDataAuth();
                }
            },
            immediate: true
        }
    },
    methods: {
        getDataAuth() {
            let params = {
                resourceCode: 'ROLE',
                resourceId: this.treeNode.id,
                systemCode: this.systemId
            }
            this.loading = true;
            getDataAuthlistById(params).then(res => {
                if(res.data.code == 1000) {
                    let data = res.data.data;
                    if(Array.isArray(data)) {
                        this.tableData = [...data];
                    }else {
                        this.tableData = [];
                    }
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            })
        },
        authFun(row) {
            this.$refs.set.showDialog(row);
        },
    }
}
</script>

<style lang="scss" scoped>
.data-auth {
    height: 100%;
    display: flex;
    flex-direction: column;
    .table-wrap {
        flex: 1;
        overflow: hidden;
    }
}
</style>